<template>
  <div>
    <div>
      <el-button size="mini" @click="handleAdd(0, {menuId: 0})">新增</el-button>
    </div>
    <el-table
      :data="tableData"
      style="width: 100%;margin-bottom: 20px;"
      row-key="menuId"
      default-expand-all
      size="small"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    >
      <el-table-column label="菜单名称">
        <template slot-scope="scope">
          <span>{{ scope.row.title }}</span>
        </template>
      </el-table-column>
      <el-table-column label="图标" width="50">
        <template slot-scope="scope">
          <svg-icon :icon-class="scope.row.icon" />
        </template>
      </el-table-column>
      <el-table-column label="排序">
        <template slot-scope="scope">
          <span>{{ scope.row.sort }}</span>
        </template>
      </el-table-column>
      <el-table-column label="路径">
        <template slot-scope="scope">
          <span>{{ scope.row.path }}</span>
        </template>
      </el-table-column>
      <el-table-column label="是否可见">
        <template slot-scope="scope">
          <span>{{ scope.row.visible == "1"?"可见": "隐藏"}}</span>
        </template>
      </el-table-column>
      <el-table-column label="创建时间">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="mini"
            icon="el-icon-edit"
            @click="handleEdit(scope.$index, scope.row)"
          >编辑</el-button>
          <el-button
            type="text"
            size="mini"
            icon="el-icon-plus"
            @click="handleAdd(scope.$index, scope.row)"
          >新增</el-button>
          <el-button
            type="text"
            size="mini"
            icon="el-icon-delete"
            @click="handleDelete(scope.$index, scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- dialog 增加 模态框 -->
    <el-dialog
      :title="dialogInfo.title"
      :visible.sync="dialogInfo.dialogVisible"
      :width="dialogInfo.width"
    >
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px">
        <el-form-item label="上级部门" prop="parentId" v-if="ruleForm.menuId == 0">
          <treeselect
            v-model="ruleForm.parentId"
            :options="deptOptions"
            :normalizer="normalizer"
            placeholder="选择上级部门"
          />
        </el-form-item>
        <el-form-item label="菜单标题" prop="title">
          <el-input v-model="ruleForm.title"></el-input>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input-number
            size="medium"
            controls-position="right"
            v-model="ruleForm.sort"
            :step-strictly="true"
            :min="0"
            :max="10"
            label="描述文字"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="菜单类型" prop="menuType">
          <el-radio-group v-model="ruleForm.menuType">
            <el-radio
              :label="item.value"
              v-for="item of menuTypeOptions"
              :key="item.id"
            >{{item.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="请求方式" prop="action" v-if="ruleForm.menuType == 'A'">
          <el-radio-group v-model="ruleForm.action">
            <el-radio
              :label="item.value"
              v-for="item of methodTypeOptions"
              :key="item.id"
            >{{item.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="菜单图标" prop="icon">
          <el-popover
            placement="bottom-start"
            width="383"
            trigger="click"
            @show="$refs['iconSelect'].reset()"
          >
            <IconSelect ref="iconSelect" @selected="selected" />
            <el-input slot="reference" v-model="ruleForm.icon" placeholder="点击选择图标" readonly>
              <svg-icon
                v-if="ruleForm.icon"
                slot="prefix"
                :icon-class="ruleForm.icon"
                class="el-input__icon"
                style="height: 32px;width: 16px;margin-top:4px;"
              />
              <i v-else slot="prefix" class="el-icon-search el-input__icon" />
            </el-input>
          </el-popover>
        </el-form-item>
        <el-form-item
          label="路由名称"
          prop="menuName"
          v-if="ruleForm.menuType == 'M' || ruleForm.menuType == 'C'"
        >
          <el-input v-model="ruleForm.menuName"></el-input>
        </el-form-item>
        <el-form-item
          label="组件路径"
          prop="component"
          v-if="ruleForm.menuType == 'M' || ruleForm.menuType == 'C'"
        >
          <el-input v-model="ruleForm.component"></el-input>
        </el-form-item>
        <el-form-item label="路由地址" prop="path" v-if="ruleForm.menuType != 'F'">
          <el-input v-model="ruleForm.path"></el-input>
        </el-form-item>
        <el-form-item
          label="权限标识"
          prop="permission"
          v-if="ruleForm.menuType == 'C' || ruleForm.menuType == 'F'"
        >
          <el-input v-model="ruleForm.permission"></el-input>
        </el-form-item>
        <el-form-item
          label="是否外链"
          prop="isIframe"
          v-if="ruleForm.menuType == 'M' || ruleForm.menuType == 'C'"
        >
          <el-radio-group v-model="ruleForm.isIframe">
            <el-radio
              :label="item.value"
              v-for="item of externalLinkOptins"
              :key="item.id"
            >{{item.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="菜单状态" prop="visible" v-if="ruleForm.menuType != 'F'">
          <el-radio-group v-model="ruleForm.visible">
            <el-radio
              :label="item.value"
              v-for="item of showHideOptions"
              :key="item.id"
            >{{item.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogInfo.dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  getMenuTree,
  updateMenu,
  addMenu,
  deleteMenu
} from "@/api/system/menu";
import { getDictItems } from "@/api/system/dict";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import IconSelect from "@/components/IconSelect";
export default {
  components: { Treeselect, IconSelect },
  name: "mune",
  data() {
    return {
      tableData: [],
      deptOptions: [],
      externalLinkOptins: [], // 外链选项
      showHideOptions: [], // 菜单是否隐藏
      menuTypeOptions: [], // 菜单类型
      methodTypeOptions: [], // 请求类型
      dialogInfo: {
        dialogVisible: false,
        title: "",
        width: "35%"
      },
      ruleForm: {
        menuId: 0,
        menuName: "",
        title: "",
        icon: "",
        path: "",
        paths: "",
        menuType: "M",
        action: "GET",
        permission: "",
        parentId: 0,
        noCache: "",
        breadcrumb: "",
        component: "",
        sort: "",
        visible: "1",
        isIframe: "0",
        createTime: "",
        updateTime: "",
        delFlag: ""
      },
      rules: {
        menuName: [
          { required: true, message: "请数据菜单名称", trigger: "blur" }
        ],
        title: [{ required: true, message: "请输入菜单标题", trigger: "blur" }],
        icon: [{ required: true, message: "请选择图标", trigger: "change" }],
        path: [{ required: true, message: "请输入路由路径", trigger: "blur" }],
        action: [
          { required: true, message: "请选择请求方式", trigger: "change" }
        ],
        permission: [
          { required: true, message: "请输入权限标识", trigger: "blur" }
        ],
        component: [
          { required: true, message: "请输入组件路径", trigger: "blur" }
        ],
        permission: [
          { required: true, message: "请输入权限标识", trigger: "blur" }
        ]
      }
    };
  },
  created() {
    this.getList();
    // 获取是否外链字典
    getDictItems({ dictType: "sys_external_link" }).then(resp => {
      if (resp.code == 0) {
        this.externalLinkOptins = resp.data.item;
      }
    });
    // 获取是否外链字典
    getDictItems({ dictType: "sys_show_hide" }).then(resp => {
      if (resp.code == 0) {
        this.showHideOptions = resp.data.item;
      }
    });
    // 获取菜单类型
    getDictItems({ dictType: "sys_menu_type" }).then(resp => {
      if (resp.code == 0) {
        this.menuTypeOptions = resp.data.item;
      }
    });
    // 获取请求方式
    getDictItems({ dictType: "sys_method_type" }).then(resp => {
      if (resp.code == 0) {
        this.methodTypeOptions = resp.data.item;
      }
    });
  },
  methods: {
    getList() {
      getMenuTree().then(resp => {
        if (resp.code == 0) {
          this.tableData = resp.data.deptTree;
          this.deptOptions = [];
          const dept = { menuId: 0, title: "主类目", children: [] };
          dept.children = resp.data.deptTree;
          this.deptOptions.push(dept);
        }
      });
    },
    // 修改部门
    handleEdit(index, row) {
      // 打开dialog
      this.dialogInfo.title = "编辑";
      this.dialogInfo.dialogVisible = true;
      this.clearValidate("ruleForm");
      this.ruleForm.menuId = row.menuId;
      this.ruleForm.menuName = row.menuName;
      this.ruleForm.title = row.title;
      this.ruleForm.icon = row.icon;
      this.ruleForm.path = row.path;
      this.ruleForm.paths = row.paths;
      this.ruleForm.menuType = row.menuType;
      this.ruleForm.action = row.action;
      this.ruleForm.permission = row.permission;
      this.ruleForm.parentId = row.parentId;
      this.ruleForm.noCache = row.noCache;
      this.ruleForm.breadcrumb = row.breadcrumb;
      this.ruleForm.component = row.component;
      this.ruleForm.sort = row.sort;
      this.ruleForm.visible = row.visible;
      this.ruleForm.isIframe = row.isIframe;
      this.ruleForm.createTime = row.createTime;
      this.ruleForm.updateTime = row.updateTime;
      this.ruleForm.delFlag = row.delFlag;
    },
    // 删除部门
    handleDelete(index, row) {
      deleteMenu(row.menuId).then(resp => {
        if (resp.code == 0) {
          this.notifySuccess(resp.message);
          this.getList();
        }
      });
    },
    // 新增dialog
    handleAdd(index, row) {
      this.dialogInfo.title = "新增";
      this.dialogInfo.dialogVisible = true;
      this.resetForm();
      this.clearValidate("ruleForm");
      this.ruleForm.menuId = row.menuId;
    },
    /** 转换菜单数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.menuId,
        label: node.title,
        children: node.children
      };
    },
    // 选择图标
    selected(name) {
      this.ruleForm.icon = name;
    },
    // 移除表单项的校验结果
    clearValidate(formName) {
      this.$nextTick(function() {
        // DOM 现在更新了
        // `this` 绑定到当前实例
        this.$refs[formName].clearValidate();
      });
    },
    resetForm() {
      this.ruleForm = {
        menuId: 0,
        menuName: "",
        title: "",
        icon: "",
        path: "",
        paths: "",
        menuType: "M",
        action: "GET",
        permission: "",
        parentId: 0,
        noCache: "",
        breadcrumb: "",
        component: "",
        sort: "",
        visible: "1",
        isIframe: "0",
        createTime: "",
        updateTime: "",
        delFlag: ""
      };
    },
    submitForm: function() {
      this.$refs["ruleForm"].validate(valid => {
        if (valid) {
          // 判断是否修改还是新增
          if (this.dialogInfo.title == "新增") {
            let obj = {};
            // 判断新增类型 TODO 以后归在一起
            switch (this.ruleForm.menuType) {
              case "M": // 目录
                obj.parentId = this.ruleForm.menuId;
                obj.menuName = this.ruleForm.menuName;
                obj.icon = this.ruleForm.icon;
                obj.menuType = this.ruleForm.menuType;
                obj.sort = this.ruleForm.sort;
                obj.isIframe = this.ruleForm.isIframe;
                obj.visible = this.ruleForm.visible;
                obj.title = this.ruleForm.title;
                obj.component = this.ruleForm.component;
                obj.path = this.ruleForm.path;
                break;
              case "C": // 菜单
                obj.parentId = this.ruleForm.menuId;
                obj.menuName = this.ruleForm.menuName;
                obj.icon = this.ruleForm.icon;
                obj.menuType = this.ruleForm.menuType;
                obj.sort = this.ruleForm.sort;
                obj.isIframe = this.ruleForm.isIframe;
                obj.visible = this.ruleForm.visible;
                obj.title = this.ruleForm.title;
                obj.component = this.ruleForm.component;
                obj.path = this.ruleForm.path;
                obj.permission = this.ruleForm.permission;
                break;
              case "F": // 按钮
                obj.parentId = this.ruleForm.menuId;
                obj.icon = this.ruleForm.icon;
                obj.menuType = this.ruleForm.menuType;
                obj.sort = this.ruleForm.sort;
                obj.isIframe = this.ruleForm.isIframe;
                obj.visible = this.ruleForm.visible;
                obj.title = this.ruleForm.title;
                obj.permission = this.ruleForm.permission;
                break;
              case "A": // 接口
                obj.parentId = this.ruleForm.menuId;
                obj.icon = this.ruleForm.icon;
                obj.menuType = this.ruleForm.menuType;
                obj.sort = this.ruleForm.sort;
                obj.isIframe = this.ruleForm.isIframe;
                obj.visible = this.ruleForm.visible;
                obj.title = this.ruleForm.title;
                obj.action = this.ruleForm.action;
                obj.path = this.ruleForm.path;
                break;
            }
            addMenu(obj).then(resp => {
              this.notifySuccess(resp.message);
                this.closeDialog();
                this.getList();
            })
          } else {
            updateMenu(this.ruleForm).then(resp => {
              if (resp.code == 0) {
                this.notifySuccess(resp.message);
                this.closeDialog();
                this.getList();
              }
            });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 关闭dialog
    closeDialog() {
      this.dialogInfo.dialogVisible = false;
    }
  }
};
</script>